<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar :title="detailInfo.gameName" @click-left="onClickLeft" @click-right="onClickRight" fixed>
    <template #left>
      <van-icon name="arrow-left" size="24" color="#000" />
    </template>
    <template #right>
      <van-icon name="share-o" size="24" color="#000" />
    </template>
  </van-nav-bar>

  <!-- loading -->
  <van-loading type="spinner" v-if="!isShow" vertical size="30px" color="#969799" style="margin-top: 10vh;">加载中...
  </van-loading>

  <!-- 游戏详情 -->
  <div class="game-detail-container" v-else>
    <!-- 轮播图 -->
    <Swiper :banner="detailInfo.banners"></Swiper>
    <!-- 游戏价格 -->
    <div class="game-price">
      <p class="unit">￥</p>
      <p class="current">{{ detailInfo.currentPrice }}</p>
      <div class="discount-info" v-if="detailInfo.discount.isDiscount">
        <p class="desc">{{ detailInfo.discount.deadline }}</p>
        <div class="discount-box">
          <p class="discount">{{ detailInfo.discount.discountRate }}</p>
          <p class="original">¥{{ detailInfo.discount.originalPrice }}</p>
        </div>
      </div>
      <div class="btn-trend">全区价格/趋势</div>
    </div>
    <!-- 游戏数据 -->
    <div class="game-data">
      <div class="row-1">
        <div class="name-box">
          <p class="game-name">{{ detailInfo.gameName }}</p>
          <p class="game-name-en">{{ detailInfo.gameNameEn }}</p>
        </div>
        <div class="game-score">
          <van-icon name="award" />
          {{ detailInfo.gameScore }}
        </div>
      </div>
      <div class="row-2">
        <div class="tags">
          <!-- 优惠券 -->
          <p class="tag coupon" v-if="detailInfo.coupon != ''">{{ detailInfo.coupon }}</p>
          <!-- 平台 -->
          <p class="tag plat">
            <img src="https://cdn.max-c.com/static/heybox/webapp/app/img/steam.6e83cdef.svg" />
          </p>
          <p class="tag" v-for="item in detailInfo.tags">{{ item }}</p>
        </div>
      </div>
      <div class="row-3">
        <game-data-list :dataInfo="detailInfo.gameData" style="margin-top: 10px;"></game-data-list>
      </div>
    </div>
    <!-- 游戏简介 -->
    <div class="game-info">
      <div class="game-info-title">
        <p class="title">游戏简介</p>
        <p class="btn-all" @click="showAllGameInfo">
          <span>全部</span>
          <van-icon name="arrow" />
        </p>
      </div>
      <p class="about-game">{{ detailInfo.aboutGame }}</p>
      <div class="menu-list">
        <div class="menu-item">
          <p>
            发布时间：
            <span>{{ detailInfo.releaseTime }}</span>
          </p>
        </div>
        <div class="menu-item">
          <p>
            开发商：
            <span>{{ detailInfo.developers }}</span>
          </p>
        </div>
        <div class="menu-item">
          <p>
            硬件配置：
            <span style="color: #006ef4;" @click="showAllGameInfo">
              点击查看
              <van-icon name="play" />
            </span>
          </p>
        </div>
        <div class="menu-item">
          <p>
            发行商：
            <span>{{ detailInfo.publisher }}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 游戏评价 -->
    <div class="game-rating">
      <div class="section-title">
        <p class="title">游戏评价</p>
      </div>
      <div class="rating-wrapper">
        <div class="rating-box">
          <div class="rate-score">{{ detailInfo.gameScore }}</div>
        </div>
        <div class="rank-wrap">
          <div class="rank-row">
            <template v-for="item in 5">
              <van-icon name="star" />
            </template>
          </div>
          <div class="rank-row">
            <template v-for="item in 4">
              <van-icon name="star" />
            </template>
          </div>
          <div class="rank-row">
            <template v-for="item in 3">
              <van-icon name="star" />
            </template>
          </div>
          <div class="rank-row">
            <template v-for="item in 2">
              <van-icon name="star" />
            </template>
          </div>
          <div class="rank-row">
            <van-icon name="star" />
          </div>
        </div>
        <div class="rank-progress">
          <template v-for="item in detailInfo.starEvaluation">
            <van-progress :show-pivot="false" color="#969799" stroke-width="5" :percentage="item" />
          </template>
        </div>
      </div>
    </div>
    <!-- 玩家评论 -->
    <div class="game-comments">
      <div class="section-title">
        <p class="title">玩家评论</p>
      </div>
      <template v-for="data in detailInfo.playerEvaluation">
        <game-comments :commentData="data"></game-comments>
      </template>
    </div>
  </div>

  <!-- 底部动作栏 -->
  <van-action-bar class="action-bar van-hairline--top">
    <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartStore.cartsGame.length" @click="toCart" />
    <van-action-bar-icon icon="star" :text="starText" :color="starColor" @click="starClick" />
    <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
    <van-action-bar-button type="danger" text="立即购买" @click="clickBuyGame" />
    <!-- color="linear-gradient(135deg, #464b50, #14191e)" -->
  </van-action-bar>
  <!-- 详细游戏介绍弹出窗 -->
  <van-popup v-model:show="showAll" closeable round position="bottom" :style="{ height: '65%' }">
    <game-introduction :gameIndct="detailInfo.gameIntroduction"></game-introduction>
  </van-popup>
  <!-- 分享组件 -->
  <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
</template>


<script setup>
import Swiper from '../../components/swipe/Swiper.vue';
import GameDataList from '../../components/gameDataList/gameDataList.vue';
import GameIntroduction from '../../components/gameIntroduction/gameIntroduction.vue'
import GameComments from '../../components/gameComments/gameComments.vue'

import { ref, reactive, onMounted, nextTick } from 'vue';
import { Toast, Dialog } from 'vant'
import router from '../../route';

import { getGameDetail } from '../../network/gameDetail'

import { useCartStore } from '../../store/shoppingCart';
import { useUserStore } from '../../store/user';

const cartStore = useCartStore()
const userStore = useUserStore()

// 获取路由中的游戏id
let gameId = ref(0)

const detailInfo = reactive({
  gameId: 0,
  banners: [],
  currentPrice: 0,
  discount: {},
  gameName: '',
  gameNameEn: '',
  gameScore: 0,
  coupon: '',
  tags: [],
  gameData: [],
  aboutGame: '',
  releaseTime: '',
  developers: '',
  publisher: '',
  starEvaluation: [],
  playerEvaluation: [],
  gameIntroduction: {}
})

const isShow = ref(false)
onMounted(() => {
  gameId.value = router.currentRoute.value.query.id
  getGameDetail(gameId.value).then(res => {
    const { data: result } = res
    for (let key in result) {
      detailInfo[key] = result[key]
    }
    setTimeout(() => {
      isShow.value = true
    }, 500)
  }).catch(err => {
    console.log(err);
    Toast.fail('请重试');
  })
})

// 显示详细游戏介绍弹出窗
const showAll = ref(false)
const showAllGameInfo = () => {
  showAll.value = true
}

// 跳转到购物车页面
const toCart = () => {
  router.push('/shoppingcart')
}

// 加入购物车
const addCart = () => {
  if (window.sessionStorage.getItem('token')) {
    if (cartStore.cartsGame.includes(detailInfo.gameId)) {
      Toast.fail('商品已经在购物车中啦~')
    } else {
      cartStore.cartsGame.push(detailInfo.gameId)
      Toast.success('添加成功')
    }
  } else {
    Dialog.confirm({
      title: '请先登录哦~',
      confirmButtonText: '去登录',
      confirmButtonColor: '#000000',
      cancelButtonColor: '#969799'
    }).then(() => {
      return router.push('/profile')
    }).catch(() => {
      return
    });
  }
}

// 点击购买游戏
userStore.placeOrder.length = 0
const clickBuyGame = () => {
  userStore.placeOrder.push(detailInfo)
  nextTick(() => {
    router.push('/settlement')
  })
}

// 点击左侧按钮返回上级路由
const onClickLeft = () => {
  history.back()
};

// 分享面板
let showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: 'QQ', icon: 'qq' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '二维码', icon: 'qrcode' },
];

// 点击右侧按钮显示分享面板
const onClickRight = () => {
  showShare.value = true
}
const onSelect = (option) => {
  Toast(option.name);
  if (option.name === '复制链接') {
    console.log(window.location.href);
  }
  showShare.value = false;
};

// 收藏点击事件
const isStar = ref(false)
const starColor = ref('#c8c9cc')
const starText = ref('收藏')
onMounted(() => {
  if (userStore.userInfo.starGameId.includes(gameId.value)) {
    starColor.value = '#ff5000'
    starText.value = '已收藏'
  }
})
const starClick = () => {
  isStar.value = !isStar.value
  if (isStar.value && !userStore.userInfo.starGameId.includes(gameId.value)) {
    starColor.value = '#ff5000'
    starText.value = '已收藏'
    userStore.userInfo.starGameId.push(gameId.value)
    Toast.success('已收藏')
  } else {
    starColor.value = '#c8c9cc'
    starText.value = '收藏'
    userStore.userInfo.starGameId.forEach((item, index) => {
      if (item === gameId.value) {
        userStore.userInfo.starGameId.splice(index, 1)
      }
    })
    Toast.success('已取消收藏')
  }
}

</script>

<style scoped>
.game-detail-container {
  margin-top: 46px;
  padding-bottom: 50px;
  background-color: #fff;
}

/* 底部动作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* 游戏价格 */
.game-price {
  height: 50px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #464b50, #14191e);
  color: #fff;
}

.game-price .unit {
  font-size: 28px;
  font-weight: 700;
}

.game-price .current {
  font-size: 30px;
  font-weight: 700;
  margin-left: 2px;
}

.game-price .discount-info {
  margin-left: 10px;
}

.game-price .discount-info .desc {
  line-height: 14px;
  font-size: 10px;
  margin-bottom: 5px;
}

.game-price .discount-info .discount-box {
  height: 14px;
  border-radius: 1px;
  overflow: hidden;
  display: flex;
}

.game-price .discount-info .discount-box .discount {
  background-color: hsla(105, 100%, 52%, 0.578);
  padding: 0 3px;
  font-weight: 700;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
}

.game-price .discount-info .discount-box .original {
  background-color: hsla(0, 0%, 100%, 0.2);
  padding: 0 4px;
  text-decoration: line-through;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
}

.game-price .btn-trend {
  width: 90px;
  height: 24px;
  line-height: 24px;
  margin-left: auto;
  border-radius: 2px;
  background-color: hsla(0, 0%, 100%, 0.2);
  font-size: 12px;
  text-align: center;
}

/* 游戏数据 */
.game-data {
  padding: 12px;
}

.game-data .row-1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-data .row-1 .game-name {
  line-height: 25px;
  font-size: 18px;
  font-weight: 600;
  color: #323233;
}

.game-data .row-1 .game-name-en {
  line-height: 14px;
  font-size: 11px;
  color: #969799;
  margin-top: 4px;
}

.game-data .row-1 .game-score {
  padding: 4px 6px;
  background-image: linear-gradient(45deg, #ff9f00, #f58045);
  border-radius: 3px;

  line-height: 22px;
  font-size: 22px;
  color: #fff;
  font-weight: 900;
}

.game-data .row-2 {
  margin-top: 6px;
  overflow: hidden;
}

.game-data .row-2 .tags {
  display: flex;
  flex-wrap: wrap;
}

.game-data .row-2 .tags .tag {
  height: 20px;
  padding: 0 7px;
  background-color: #f7f8f9;
  color: #646566;
  font-size: 10px;
  margin: 6px 6px 0 0;
  display: flex;
  align-items: center;
  border-radius: 2px;
}

.game-data .row-2 .tags .tag.coupon {
  background-color: rgba(255, 137, 0, 0.15);
  color: #ff8900;
}

.game-data .row-2 .tags .tag.plat {
  background-color: #14191e;
}

/* 游戏简介 */
.game-detail-container .game-info {
  border-top: 3px solid #f2f3f5;
  padding: 12px;
  background-color: #fff;
}

.game-info .game-info-title {
  display: flex;
  align-items: center;
}

.game-info-title .title {
  line-height: 22px;
  font-size: 17px;
  font-weight: 500;
  color: #323233;
}

.game-info-title .btn-all {
  height: 22px;
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  color: #969799;
}

.game-info .about-game {
  margin-top: 10px;
  line-height: 20px;
  font-size: 14px;
  color: #323233;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.game-info .menu-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 4px;
}

.game-info .menu-list .menu-item {
  width: 48.5%;
  height: 18px;
  margin-top: 6px;
}

.game-info .menu-list .menu-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 19px;
  color: #323233;
}

/* 游戏评价 */
.game-detail-container .game-rating {
  border-top: 3px solid #f2f3f5;
  padding: 10px 12px;
  background-color: #fff;
}

.game-rating .section-title .title {
  line-height: 22px;
  font-size: 17px;
  font-weight: 500;
  color: #323233;
}

.game-rating .rating-wrapper {
  width: 100%;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}

.game-rating .rating-wrapper .rating-box {
  width: 88px;
  height: 70px;
  background: linear-gradient(45deg, #ff9f00, #f58045);
}

.game-rating .rating-wrapper .rating-box .rate-score {
  height: 34px;
  line-height: 70px;
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
}

.game-rating .rating-wrapper .rank-wrap {
  width: 62px;
  height: 70px;
  margin-left: 12px;
}

.game-rating .rating-wrapper .rank-wrap .rank-row {
  width: 100%;
  height: 10px;
  margin-top: 3px;
  display: flex;
  justify-content: flex-end;
}

.game-rating .rating-wrapper .rank-wrap .rank-row i {
  width: 10px;
  height: 10px;
  font-size: 20px;
  transform: scale(0.5);
  transform-origin: top left;
  color: #969799;
}

.game-rating .rating-wrapper .rank-wrap .rank-row i:not(:first-child) {
  margin-left: 3px;
}

.game-rating .rating-wrapper .rank-progress {
  flex: 1;
  height: 70px;
  margin-left: 10px;
}

.game-rating .rating-wrapper .rank-progress div:first-of-type {
  margin-top: 6px;
}

.game-rating .rating-wrapper .rank-progress div {
  margin-top: 8px;
}

/* 玩家评论 */
.game-detail-container .game-comments {
  border-top: 3px solid #f2f3f5;
  padding: 10px 0px;
  background-color: #fff;
}

.game-detail-container .game-comments .section-title {
  padding-left: 12px;
}

.game-comments .section-title .title {
  line-height: 22px;
  font-size: 17px;
  font-weight: 500;
  color: #323233;
}
</style>
